import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import '../const.dart';
import 'friends_data.dart';

class IndexBar extends StatefulWidget {
  //回调给friends_page，让indexbar和listView一起滚动
  final void Function(String title) indexBarCallback;

  const IndexBar({Key? key, required this.indexBarCallback}) : super(key: key);

  @override
  State<IndexBar> createState() => _IndexBarState();
}

class _IndexBarState extends State<IndexBar> {
  //默认背景色透明，选中后改为黑色透明0.3
  Color _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
  //文字默认黑色，选中后改为白色
  Color _textColor = Colors.black;

  //找到Render 转换坐标系
  final GlobalKey _globalKey = GlobalKey();
  //指示器默认值
  double _indicatorY = 0;
  String _indicatorText = "A";
  bool _isShowIndicator = false;
  //每个item的高
  double _itemH = 0.0;

  @override
  Widget build(BuildContext context) {
    final List<Widget> indexData = <Widget>[];
    for (int i = 0; i < indexWords.length; i++) {
      indexData.add(Expanded(child: Text(indexWords[i], style: TextStyle(fontSize: 10, color: _textColor),)));
    }
    _itemH = ScreenHeight(context)/2/indexWords.length;
    return Positioned(//定位
      right: 0,
      top: 0, //这里是body开始的！！！
      bottom: 0,
      child: Container( //这个Container填满整个父控件
        width: _isShowIndicator ? 120 : 20,
        color: Colors.transparent,
        alignment: Alignment.center,
        child: Container( //这个Container高度一半，居中显示
          height: ScreenHeight(context)/2,
          alignment: Alignment.centerRight,
          child: Row(
            children: [
              Container(
                alignment: Alignment(1.0, _indicatorY),
                width: _isShowIndicator ? 100 : 0,
                child: _isShowIndicator ? Stack(
                  alignment: Alignment.center,
                  children: [
                    Image(image: AssetImage("images/friends/气泡.png"), width: 60, fit: BoxFit.fitWidth,),
                    Text(_indicatorText, style: TextStyle(fontSize: 35, color: Colors.white,)),
                  ],
                ) : Container(),
              ),
              GestureDetector(
                onVerticalDragUpdate: (DragUpdateDetails details){
                  callbackAndShowLetter(context, details.globalPosition);
                },
                onVerticalDragDown: (DragDownDetails details){
                  callbackAndShowLetter(context, details.globalPosition);
                },
                onVerticalDragEnd: (DragEndDetails details){
                  _isShowIndicator = false;
                  setState(() {
                    _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
                    _textColor = Colors.black;
                  });
                },
                onVerticalDragCancel: () {
                  _isShowIndicator = false;
                  setState(() {
                    _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
                    _textColor = Colors.black;
                  });
                },
                child: Container(
                  width: 20,
                  color: _bkColor,
                  child: Column(//显示文本
                    key: _globalKey, //给定位组件添加globalKey
                    children: indexData,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void callbackAndShowLetter(BuildContext context, Offset globalPosition) {
    int index = getIndexBarTitle(context, globalPosition);
    String title = indexWords[index];
    // print(title);
    widget.indexBarCallback(title);
    setState(() {
      _bkColor = Color.fromRGBO(1, 1, 1, 0.3);
      _textColor = Colors.white;
    });
    _indicatorText = title;
    _isShowIndicator = true;
    //-1.1开始到1.1 总共2.2平均分配length那么多份，指示几就是几份，从1.1开始
    _indicatorY = 2.2 / (indexWords.length-1) * index - 1.1;
  }
  int getIndexBarTitle(BuildContext context, Offset globalPosition ) {
    RenderBox box = _globalKey.currentContext!.findRenderObject() as RenderBox;
    int index = (box.globalToLocal(globalPosition).dy ~/ _itemH).clamp(0, indexWords.length-1);
    // print("当前点击的是：$index");
    return index;
  }
}
